<template>
  <AnalysisWrap titleText="地表透明" info="提示:可以透明地表，进入地下模式，可以看地下管网等数据。" @goAnalysisOtherViewFn="goAnalysisOtherView">
    <template #container>
      <div class="control">
        <span class="lable">开启状态:</span>
        <a-checkbox class="control-check" change="onCheckedOpacity" v-model:checked="opacityChecked">开启地表透明</a-checkbox>
      </div>
      <div class="control">
        <span class="lable">地表透明度:</span>
        <mars-slider class="control-slider" @change="onChangeOpacity" v-model:value="opacityValue" :min="0" :max="1" :step="0.1" />
      </div>
    </template>
  </AnalysisWrap>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue"
import AnalysisWrap from "./analysis-wrap.vue"
import * as mapWork from "./map"

const emit = defineEmits(["goAnalysisOtherView"])

function goAnalysisOtherView(name: string) {
  emit("goAnalysisOtherView", name)
}

onMounted(() => {
  mapWork.onMountedTerrainOpacity()
})
onUnmounted(() => {
  mapWork.onUnmountedTerrainOpacity()
})

const opacityChecked = ref<boolean>(true)
const opacityValue = ref<number>(0.5)

// 改变透明度的状态
const onCheckedOpacity = () => {
  mapWork.onCheckedOpacity(opacityChecked.value)
}

// 改变透明度的值
const onChangeOpacity = () => {
  mapWork.onChangeOpacity(opacityValue.value)
}
</script>
<style scoped lang="less">
.ant-slider {
  width: 125px;
}
.analysis-content-lable {
  display: block;
  width: 75px;
  text-align: right;
  color: #fff;
}
.control {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .lable {
    width: 74px;
    font-size: 14px;
    text-align: right;
    color: rgba(234, 242, 255, 0.8);
  }
  .control-slider {
    flex: 1;
  }
  .control-check {
    margin-left: 10px;
  }
}
</style>
